<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="/assets/iview-2.0/dist/styles/iview.css"></link>
    <script src="/assets/js/vue.js"></script>
    <script src="/assets/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/iview-2.0/dist/iview.js"></script>
    <style>
        .demo-spin-icon-load{
            animation: ani-demo-spin 1s linear infinite;
        }
        @keyframes ani-demo-spin {
            from { transform: rotate(0deg);}
            50%  { transform: rotate(180deg);}
            to   { transform: rotate(360deg);}
        }
    </style>
</head>
<body style="width: 100%;height: 100%">
<div id="app" style="width: 100%;height: 100%;position: relative;">
    <template>
        <Tabs v-on:on-click="changeTab">
            <Tab-pane label="电影" key="1" icon="social-apple">
                <div style="width: 100%;height: 100%">
                    <div style="width: 100%;display: grid;grid-template-columns: auto auto auto auto auto auto;
          grid-template-rows: auto auto auto;grid-gap: 10px 20px;justify-items:center;align-items:center">
                        <div  class="video" v-for="item in movies.list" style="background: #00A881" v-bind:video_id="item.id" @click="clickitem(item.id)">
                            <img v-bind:src="item.thumb" style="width: 200px"/>
                            <p>{{item.title}}</p>
                            <p>{{item.actors}}</p>
                        </div>

                    </div>
                    <template >
                        <Page :total="movies.last_page" v-on:on-change="changePage" :current="movies.current_page" show-elevator></Page>
                    </template>
                </div>
            </Tab-pane>
            <Tab-pane label="电视剧" key="2" icon="social-windows">
                <div style="width: 100%;height: 100%">
                    <div style="width: 100%;display: grid;grid-template-columns: auto auto auto auto auto auto;
          grid-template-rows: auto auto auto;grid-gap: 10px 20px;justify-items:center;align-items:center">
                        <div  v-for="item in movies.list" style="background: #00A881" v-bind:video_id="item.id" @click="clickitem">
                            <img v-bind:src="item.thumb" style="width: 200px"/>
                            <p>{{item.title}}</p>
                            <p>{{item.actors}}</p>
                        </div>

                    </div>
                    <template >
                        <Page :total="movies.last_page" v-on:on-change="changePage" :current="movies.current_page" show-elevator></Page>
                    </template>
                </div>
            </Tab-pane>
            <Tab-pane label="综艺" key="3" icon="social-tux">
                <div style="width: 100%;height: 100%">
                    <div style="width: 100%;display: grid;grid-template-columns: auto auto auto auto auto auto;
          grid-template-rows: auto auto auto;grid-gap: 10px 20px;justify-items:center;align-items:center">
                        <div  v-for="item in movies.list" style="background: #00A881" v-bind:video_id="item.id" @click="clickitem">
                            <img v-bind:src="item.thumb" style="width: 200px"/>
                            <p>{{item.title}}</p>
                            <p>{{item.actors}}</p>
                        </div>

                    </div>
                    <template >
                        <Page :total="movies.last_page" v-on:on-change="changePage" :current="movies.current_page" show-elevator></Page>
                    </template>
                </div>
            </Tab-pane>
            <Tab-pane label="动漫" key="4" icon="social-tux">
                <div style="width: 100%;height: 100%">
                    <div style="width: 100%;display: grid;grid-template-columns: auto auto auto auto auto auto;
          grid-template-rows: auto auto auto;grid-gap: 10px 20px;justify-items:center;align-items:center">
                        <div  v-for="item in movies.list" style="background: #00A881" v-bind:video_id="item.id" @click="clickitem(item.id)">
                            <img  v-on:click="clickitem" v-bind:src="item.thumb" style="width: 200px"/>
                            <p>{{item.title}}</p>
                            <p>{{item.actors}}</p>
                        </div>

                    </div>
                    <template >
                        <Page :total="movies.last_page" v-on:on-change="changePage" :current="movies.current_page" show-elevator></Page>
                    </template>
                </div>
            </Tab-pane>
        </Tabs>
    </template>
    <Spin fix size="large" v-if="spinShow">

    </Spin>
</div>

<script>
    function getVideoByType() {
        vm.$data.spinShow=true;
        $.ajax({
            url:base_url+"/video/type/"+vm.$data.movies.type,
            async:true,
            type:"GET",
            data:{
                count:vm.$data.movies.pre_page,
                page:vm.$data.movies.current_page
            },
            dataType:"json",
            success:function (res) {
                console.log(res);
                vm.$data.spinShow=false;
                vm.$data.movies.list=res.data;
                vm.$data.movies.last_page=res.last_page;
                vm.$data.movies.total=res.total;

            }
        });

    }

    var base_url= "http://"+window.location.host+"/public";
    Vue.use(iview);
    var vm=new Vue({
        el:"#app",
        data:{
            spinShow:true,
            movies:{
                type:1,
                pre_page:20,
                current_page:1,
                total:0,
                last_page:0,
                list:[],
            }
        },
        methods: {
            changePage:function (page) {
                this.movies.current_page=page;
                console.log("page:"+page);
                getVideoByType();
            },
            changeTab:function (key) {
                this.movies.current_page=1;
                this.movies.type=parseInt(key)+1;
                console.log("key:"+key);
                getVideoByType();
            },
            clickitem:function (id) {
                //var el=e.currentTarget;
                //console.log($(el).parents(".video"));
                //var id=$(el).parents(".video").attr("video_id");
                console.log("id:"+id);
                document.cookie="video_id="+id;
                location.href=base_url+"/detail";
            }
        }
    });
    getVideoByType();
</script>
</body>
</html>